<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>photo_manager</title>
<link rel="stylesheet" href="/networkforum/css/user_info.css" />
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<style type="text/css">
	h5{
		width:100px;
		margin:5px 0px 5px 0px;
		display: block;
	}
	input{
		margin:5px 0px 5px 0px;		
	}
	.userPhoto{
		width: 400px;
		height: 400px;
		border:none;
		position: relative;
		padding-left: 15px;
	}
	.userPhoto img{
		min-width: 200px;
		max-width:500px;
		width:auto;
		min-height: 200px;
		max-height:500px;
		height:auto;
		display: inline-block;
	}
</style>
<script type="text/javascript">
function check(e){
	var photo = document.getElementById("add");
	if(photo == null || photo.tagName != "IMG"){
		return false;
	}
	var userPhoto = window.parent.document.getElementById("userPhoto");
	userPhoto.src = photo.src;
	return true;
}
function show(e){
	var e = e?e:window.event;
	var target = e.target;
	if(!target.value.match(/.jpg|.gif|.png|.bmp/i)){
         alert('图片格式无效！');
         return;
    }
	var agent=window.navigator.userAgent;
    var isIE = agent.indexOf('MSIE') != -1; 
	var parent = document.getElementById("userPhoto");
	if(isIE){
		var photo = document.createElement("img");
        photo.src = target.result;
        photo.id = "add";
        parent.appendChild(photo);
        return;
	}
	//非IE
	var file = e.target.files[0];
	if(file == null){
		return ;
	}
	var child = document.getElementById("add");
	if(child !=null){
		parent.removeChild(child);
	}
	if (!file.type.match(/(.jpg|.gif|.bmp|.jpeg|.png)/)) {
		var notice = document.createElement("h2");
		notice.innerHTML = "格式不正确";
		notice.id = "add";
		parent.appendChild(notice);			
		return;
	}
	if(file.size > 102400){
		var notice = document.createElement("h2");
		notice.innerHTML = "请选择不超过100K的图片作为头像";
		notice.id = "add";
		parent.appendChild(notice);
		return;
	}
	var reader = new FileReader();
    //监听文件读取结束后事件
    reader.onloadend = function (e) {
        //将图片添加到显示列表
        var photo = document.createElement("img");
        photo.src = e.target.result;
        photo.id = "add";
        //document.getElementById("userPhoto").appendChild(photo);
        parent.appendChild(photo);
        //document.getElementById("photo").src = e.target.result;
    };
    reader.readAsDataURL(file);
}
function showPhoto(data){
	alert(data);
}
</script>
</head>
<body>
	<h2>修改头像</h2>
	<form id="photoform" action="/networkforum/user/user_photo.do" method="post" onsubmit="return check();" enctype="multipart/form-data" target="_self">
		<h5>图片位置：</h5>
    	<input name="file" onchange="show(event)" type="file"/>
    	<input style="height:25px;" type="submit" value="上传"/>
    	<iframe style="display: none;" name="ifm"></iframe>
    </form>
    <section id="userPhoto" class="userPhoto">
    	<h5>图片预览</h5>
    	<div style="clear: both;"></div>
    	<!--<img id="photo" alt="请选择图片" title="图片预览" src=""/>
    --></section>
</body>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
</html>
